<template>
	<div class="settlement">
		<div class='head'>
            <p class='title-icon'>
            	<a class='iconfont icon-jiantouzuo' href="javascript:history.go(-1)"></a>
            </p>
            <p class='title-text'>结算</p>
            <p class="title-null"></p>
      </div>   
        <div class="balance">
            <p class="now-balance">当前余额</p>
        	<p class="now-money">2333.00元</p>
        	<div class="balance-operating">
        		<p>
        			<span class="recharge">充值</span>
        		</p>
        		<p >
        			<span class="withdraw">提现</span>
        		</p>
        	</div>
        	<div class="balance-detail">
        		<div class="detail-div border-right">
        			<p>4515</p>
        			<p class="gray">已提现</p>
        		</div>
        		<div class="detail-div border-right">
        			<p>200</p>
        			<p class="gray">提现中</p>
        		</div>
        		<div class="detail-div">
        			<p>23333</p>
        			<p class="gray">累计收入/(元)</p>
        		</div>
        	</div>
        </div>
        <div class="cards">
        	<p class="bankcard-p">
        		<router-link to='/MyCard'>
        			<span class="left iconfont icon-yinxingqia"></span>
        			<span class="center bankcard">银行卡</span>
        			<span class="right iconfont icon-iconfontjiantouyou"></span>
        		</router-link>
        		
        	</p>
        	<p class="alipay-p">
        		<router-link to='/MyAlipay'>
        			<span class="left iconfont icon-qiabao"></span>
        			<span class="center alipay">支付宝</span>
        			<span class="right iconfont icon-iconfontjiantouyou"></span>
        		</router-link>
        		
        	</p>
        </div>
        
    <tabbar>
	      <tabbar-item selected link='/home'>
	        <span slot='icon' class="iconfont icon-comiishome"></span>
	        <span slot="label">首页</span>
	      </tabbar-item>
	      
	      <tabbar-item link='/orderlist'>
	        <span slot='icon' class="iconfont icon-liebiao-80"></span>
	        <span slot="label">订单</span>
	      </tabbar-item>
	      
	      <tabbar-item  link="/settlement">
	        <span slot='icon' class="iconfont icon-yijiesuan"></span>
	        <span slot="label">结算</span>
	      </tabbar-item>
	      
	      <tabbar-item link='/personcenter'>
	        <span slot='icon' class="iconfont icon-xinxi"></span>
	        <span slot="label">我的</span>
	      </tabbar-item>
	      
    </tabbar>
        
	</div>
</template>

<script>
import { Tabbar, TabbarItem } from 'vux'
export default {
  components: {
    Tabbar,
    TabbarItem
  },
  data () {
    return {
      show:false
  }
},
methods:{
}
}
</script>

<style scoped>
	.settlement{
		margin-bottom: 60px;
	}
	.balance{
		background-color: white;
		margin: 0px;
		padding: 10px;
		line-height: 30px;
	}
	.balance-operating,.balance-detail{
		display: flex;
		margin-top: 20px;
	}
	.now-balance{
		color: #999999;
	}
	.balance > p{
		text-align: center;
		margin: 0px;
	}
	.balance-operating > p,.detail-div{
		flex: 1;
		text-align: center;
	}
	.recharge,.withdraw{
		display: inline-block;
		border-radius: 6px;
		width: 60%;
		margin: 0 auto;
		text-align: center;
		height: 30px;
		line-height: 30px;
	}
	.recharge{
		color: #70B5E9;
		border: 1px #70B5E9 solid;
	}
	.withdraw{
		color:#FF8A00;
		border:1px #FF8A00 solid;
	}
	.detail-div > p{
		margin: 0px;
	}
	.gray{
		color: #999999;
	}
	.border-right{
		border-right: 1px #EBEBEB solid;
	}
	.cards >p {
		color: #999999;
		background-color: white;
		height: 40px;
		line-height: 40px;
		padding-left: 15px;
		display: flex;
	}
	.cards >p >a >span{
		display: inline-block;
	}
	.left,.right{
		width: 10%;
	}
	.center{
		width:75%
	}
	.iconfont{
		color:#CCCCCC;
		font-size: 1.4rem;
	}
	/*.icon-yinxingqia,.icon-qiabao{
		display: inline-block;
		font-size: 1.4rem;
		height: 40px;
		line-height: 40px;
		color: #CCCCCC;
	}*/
	.bankcard,.alipay{
		color: black;
		display: inline-block;
		font-size: 1rem;
	}
	.bankcard-p{
		margin-bottom: 0px;
		border-bottom: 1px #ebebeb solid;
	}
	.alipay-p{
		margin: 0px;
	}
</style>